<template>
  <div class="encode-decode-tools">
    <div class="page-header">
      <h1>编码解码工具集合</h1>
      <p>快速访问所有编码解码相关工具</p>
    </div>

    <div class="tools-grid">
      <div 
        v-for="tool in encodeDecodeTools" 
        :key="tool.id"
        class="tool-card"
        @click="goToTool(tool.route)"
      >
        <div class="tool-icon">
          <el-icon :size="32">
            <component :is="tool.icon" />
          </el-icon>
        </div>
        <div class="tool-content">
          <h3>{{ tool.name }}</h3>
          <p>{{ tool.description }}</p>
        </div>
        <div class="tool-action">
          <el-button type="primary" size="small">使用工具</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  Lock, 
  Unlock, 
  Link, 
  Document, 
  Edit, 
  DocumentCopy,
  Key
} from '@element-plus/icons-vue'

const router = useRouter()

const encodeDecodeTools = [
  {
    id: 1,
    name: 'Base64编码解码',
    description: '快速进行Base64编码和解码操作',
    icon: 'DocumentCopy',
    route: '/tool/base64'
  },
  {
    id: 2,
    name: 'MD5加密工具',
    description: '快速进行MD5哈希加密',
    icon: 'Lock',
    route: '/tool/md5'
  },
  {
    id: 3,
    name: 'SHA1加密工具',
    description: '快速进行SHA1哈希加密',
    icon: 'Lock',
    route: '/tool/sha1'
  },
  {
    id: 4,
    name: 'AES加密解密',
    description: 'AES对称加密和解密工具',
    icon: 'Key',
    route: '/tool/aes'
  },
  {
    id: 5,
    name: 'URL编码解码',
    description: '快速进行URL编码和解码操作',
    icon: 'Link',
    route: '/tool/url'
  },
  {
    id: 6,
    name: '摩斯电码转换',
    description: '摩斯电码编码和解码工具',
    icon: 'Document',
    route: '/tool/morse'
  },
  {
    id: 7,
    name: 'ASCII编码转换',
    description: 'ASCII码与字符转换工具',
    icon: 'Edit',
    route: '/tool/ascii'
  },
  {
    id: 8,
    name: '全角半角转换',
    description: '全角半角字符转换工具',
    icon: 'Edit',
    route: '/tool/fullwidth'
  },
  {
    id: 9,
    name: '密码生成器',
    description: '生成安全的随机密码',
    icon: 'Key',
    route: '/tool/password-generator'
  },
  {
    id: 10,
    name: 'GUID生成器',
    description: '生成全局唯一标识符',
    icon: 'DocumentCopy',
    route: '/tool/guid'
  }
]

const goToTool = (route) => {
  router.push(route)
}
</script>

<style scoped>
.encode-decode-tools {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 1.1rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.tool-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.tool-icon {
  color: #667eea;
  background: #f0f4ff;
  padding: 12px;
  border-radius: 8px;
  width: fit-content;
}

.tool-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.tool-content p {
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.tool-action {
  margin-top: auto;
}

@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}
</style>
